<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style type="text/css">
  body,
  ul {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }

  .tab-box {
    width: 383px;
    margin: 10px;
    border: 1px solid #ccc;
    border-top: 2px solid #206F96;
  }

  .tab-head {
    height: 31px;
  }

  .tab-head-div {
    width: 95px;
    height: 30px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background: #206F96;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    color: #fff;
  }

  .tab-head .current {
    background: #fff;
    border-bottom: 1px solid #fff;
    color: #000;
  }

  .tab-head-r {
    border-right: 0;
  }

  .tab-body-div {
    display: none;
    margin: 20px 10px;
  }

  .tab-body .current {
    display: block;
  }
</style>

<body>
  <div class="tab-box">
    <div class="tab-head">
      <div class="tab-head-div ">标签一</div>
      <div class="tab-head-div ">标签二</div>
      <div class="tab-head-div current">标签三</div>
      <div class="tab-head-div tab-head-r">标签四</div>
    </div>
    <!--jkdjfk?-->
    <div class="tab-body">
      <div class="tab-body-div "> 内容1
        <p>一号</p>
      </div>
      <div class="tab-body-div ">内容 2
        <p>二号</p>
      </div>
      <div class="tab-body-div">内容 3
        <p>三号</p>
      </div>
      <div class="tab-body-div current"> 内容4
        <p>四号</p>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var arr = document.getElementsByClassName('tab-head-div')
    var num = document.getElementsByClassName('tab-body-div')
    console.log(arr)
    for (var i = 0; i < arr.length; ++i) {
      arr[i].onclick = function () {
        for (var i = 0; i < num.length; ++i) {
          if (arr[i] == this) {
            arr[i].classList.add('current');
            num[i].classList.add('current');

          }

          else {
            arr[i].classList.remove('current');
            num[i].classList.remove('current');
          }
        }
      }
    }
  </script>
</body>

</html>